<template>
  <div>
    
    <el-button type="primary" @click="showAddDialog">新增用户</el-button>
    <el-input v-model="searchQuery" placeholder="请输入姓名进行查询"  @input="updateSearchQuery" style="margin-bottom: 20px; width: 500px;margin-left: 500px;"></el-input>
    <!--分页-->
    <el-pagination
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      :total="filterUserData.length"
      :current-page.sync="currentPage"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange">
    </el-pagination>
    <!--表格内容-->
    <el-table
      ref="list"
      :data="paginatedUserData"
      style="width: 100%"
      border
      stripe
      highlight-current-row
      :default-sort="{prop: 'date', order: 'descending'}"
      @row-click="handleRowClick"
      @select-all="handleCheckedAllAndCheckedNone"
      @select="handleCheckedAllAndCheckedNone">
      <el-table-column
        type="selection"
        width="45"
        align="center">
      </el-table-column>
      <el-table-column
        type="index"
        label="序号"
        width="50">
      </el-table-column>
      <el-table-column
        property="date"
        label="日期"
        width="180"
        sortable>
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 5px">{{scope.row.date}}</span>
        </template>
      </el-table-column>
      <el-table-column
        property="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        property="address"
        label="地址">
      </el-table-column>
      <el-table-column
        label="操作"
        width="130"
        align="center">
        <template slot-scope="scope">
          <el-button circle icon="el-icon-edit-outline" type="primary" title="编辑" size="small"
            @click="rowEdit(scope.$index, scope.row)"></el-button>
          <el-button circle icon="el-icon-delete" type="danger" title="删除" size="small"
            @click="rowDel(scope.$index, scope.row, $event);"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--编辑-弹出层-->
    <el-dialog
      title="编辑"
      :visible.sync="isShowEditDialog"
      width="430px"
      @close="dialogClose">
      <el-form
        ref="editForm"
        :model="formFileds"
        label-width="55px"

        :rules="rules">
        <el-form-item label="日期">
          <el-date-picker v-model="formFileds.date" value-format="yyyy-MM-dd" :editable="false" :clearable="false"></el-date-picker>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="formFileds.name"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="formFileds.address"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleEdit(formFileds.id)" class="pull-right margin-l-25">确定</el-button>
          <el-button @click="isShowEditDialog = false;" class="pull-right">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
        title="新增用户"
        :visible.sync="isShowAddDialog"
        width="500px"
        @close="dialogClose">
        <el-form
            ref="addForm"
            :model="addFormFields"
            label-width="100px"
            :rules="rules">
            <el-form-item label="日期" prop="date" >
            <el-date-picker v-model="addFormFields.date" value-format="yyyy-MM-dd" :editable="false" :clearable="false"></el-date-picker>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
            <el-input v-model="addFormFields.name"></el-input>
            </el-form-item>
            <el-form-item label="地址" prop="address">
            <el-input v-model="addFormFields.address"></el-input>
            </el-form-item>
            <el-form-item>
            <el-button type="primary" @click="handleAdd">确定</el-button>
            <el-button @click="dialogClose">取消</el-button>
            </el-form-item>
        </el-form>
        </el-dialog>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';  
  export default {
    name: "Table",
    data() {
      return {
        formFileds: {
        date: '',
        name: '',
        address: '',
        id: '',
        inventory: '',
        price: '',
      },
        addFormFields: {
            date: '',
            name: '',
            address: '',
            id: ''
          },
        rules: {
          name: [
            {required: true, message: '姓名不能为空', trigger: 'blur, change'}
          ],
          address: [
            {required: true, message: '地址不能为空', trigger: 'blur, change'} ],
        },
        isShowEditDialog: false,
        isShowAddDialog: false,
      }
    },
    computed: {
      ...mapState(['pageSize', 'currentPage', 'userData', 'searchQuery']),
      ...mapGetters(['filterUserData', 'paginatedUserData']),
        },
     methods: {
      ...mapMutations(['SET_PAGE_SIZE', 'SET_CURRENT_PAGE', 'SET_SEARCH_QUERY']),
      ...mapActions(['addUser', 'updateUser', 'deleteUser']),
handleRowClick(row, event, column) {
  // 仅选中当前行
  this.setCurRowChecked(row);
},
handleCheckedAllAndCheckedNone(selection) {
  // 当前选中仅一行时操作-（当前表格行高亮）
  1 != selection.length && this.$refs.list.setCurrentRow();
},
dialogClose() {
  // 清空编辑表单.resetFields();
  this.$refs.editForm && this.$refs.editForm.resetFields();
    this.formFileds = {
      date: '',
      name: '',
      address: '',
      id: '',
    };
    this.isShowEditDialog = false;
    this.$refs.addForm && this.$refs.addForm.resetFields();
    this.isShowAddDialog = false;
},
rowEdit(index, row) {
  this.setCurRowChecked(row);

  this.formFileds = { ...row};
  this.isShowEditDialog = true;
},
handleEdit(id) {
  this.$refs.editForm.validate(isValid => {
    if (!isValid) return;

    this.updateUser({ ...this.formFileds});
      this.isShowEditDialog = false;

      // 考虑到可能编辑了日期-需要重新排序
      this.$refs.list.sort('date', 'descending');

      this.$message.success('编辑成功');
    });
},
rowDel(index, row, event) {
  // 让当前删除按钮失焦
  event.target.blur();

  this.$confirm('确定要删除当前行吗？', '删除', {
    comfirmButtonText: '确定',
    cancelButtonText: '取消'
  }).then(() => {
    this.deleteUser(row.id);
    this.$message.success('删除成功');
  
  }).catch(() => { });
},
// 选中当前行-当前行的复选框被勾选
setCurRowChecked(row) {
  this.$refs.list.clearSelection();
  this.$refs.list.toggleRowSelection(row);
},
showAddDialog() {
  this.isShowAddDialog = true;
},
handleAdd() {
  this.$refs.addForm.validate(valid => {
    if (!valid) return;
    const newId = this.userData.length + 1;
    // 添加新用户到数据源
    this.addUser({
      id: newId,
      date: this.addFormFields.date,
      name: this.addFormFields.name,
      address: this.addFormFields.address,
    });
    this.dialogClose(); // 关闭弹出层
    this.$message.success('新增用户成功');
  });
},
dialogClose() {
  this.$refs.addForm && this.$refs.addForm.resetFields(); // 清空表单
  this.isShowAddDialog = false; // 关闭弹出层
},
handleCurrentChange(val) {
  this.SET_CURRENT_PAGE(val);
},
handleSizeChange(val) {
  this.SET_PAGE_SIZE(val);
  this.SET_CURRENT_PAGE(1); // 切换每页条数时重置到第一页
},
updateSearchQuery(val){
  this.SET_SEARCH_QUERY(val);
}
}
  }
</script>

<style scoped lang="less">
.el-form {
  padding: 0 10px;
}
.el-date-editor {
  width: 100% !important;
}
</style>
